<script setup>
import '@/assets/common/common.scss'
import '@/assets/common/el-form-label-center.scss'
import { ref, watch } from 'vue'

import logo from '@/assets/logo.png'
import { Return } from '@icon-park/vue-next'
import { useRoute, useRouter } from 'vue-router'
import { useForgotState } from '@/stores/index.js'

const forgotState = useForgotState()
const router = useRouter()
const route = useRoute()
const index = ref(1)
// 监听路由变化，根据当前路由名称或路径更新 index
watch(
  () => route.path,
  (newPath) => {
    if (newPath.includes('username')) index.value = 1 // 验证账户

    else if (newPath.includes('email')) {
      index.value = 2 // 发送验证码

      if (forgotState.fUser.username === '' || forgotState.fUser.code === '')
        router.push({ path: '/user/forgot/username' })
    }
    else if (newPath.includes('change')){
      index.value = 3 // 更改密码

      if (forgotState.fUser.email === '' || forgotState.fUser.emailCode === '')
        router.push({ path: '/user/forgot/email' })
    }
  },
  { immediate: true } // 在组件加载时立即执行
)
</script>

<template>
  <div class="user-page">
    <el-link @click="router.go(-1)" :underline="false" class="back-link" type="primary">
      返回&nbsp;
      <return theme="outline" class="icon-center" :strokeWidth="6" />
    </el-link>
    <div class="user-image-logo">
      <el-image @click="router.push('/')" :src="logo" />
    </div>
    <el-steps style="max-width: 600px; margin-bottom: 20px" :active="index" align-center>
      <el-step title="验证账户" />
      <el-step title="发送验证码" />
      <el-step title="更改密码" />
    </el-steps>
    <RouterView />
  </div>


</template>

<style scoped>

.demo-ruleForm {
  width: 400px;
  margin: 0 auto;

  .icon-center {
    margin-left: 5px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    color: #409EFF;
  }
}


</style>
